<template>
    <div class="home">
      <ul>

            <li v-for="(item) in post" :key="item.SemesterId">{{item.name}}</li>

        </ul>
    </div>
  </template>

<script lang="js">
 import { defineComponent } from 'vue';

export default defineComponent({
  data() {
            return {
                loading: false,
                post: null
            };
        },
        created() {
            // fetch the data when the view is created and the data is
            // already being observed
            this.fetchData();
        },
        watch: {
            // call again the method if the route changes
            '$route': 'fetchData'
        },
        methods: {
            fetchData() {
                this.post = null;
                this.loading = true;

                fetch(
                  '/api/Semester/GetSemesterList',
                  {
                    method: "POST",
                    headers: {
                      'content-type': 'application/json;charset=UTF-8',
                    },
                    body: JSON.stringify({sidx:"SemesterId",sord:"asc",page:1,rows:30}),
                  })
                    .then(r => r.json())
                    .then(json => {
                        this.post = json;
                        this.loading = false;
                        return;
                    });
            }
        },
});


</script>

<style scoped>
  .home {
    height: 100%;
  }
</style>